<template>
  <div class="page-content">
    <ArtCutterImg
      v-model:imgUrl="imageUrl"
      :boxWidth="540"
      :boxHeight="300"
      :cutWidth="360"
      :cutHeight="200"
      :quality="1"
      :tool="true"
      :watermarkText="'My Watermark'"
      watermarkColor="#ff0000"
      :showPreview="true"
      :originalGraph="false"
      :title="'图片裁剪'"
      :previewTitle="'预览效果'"
      @error="handleError"
      @imageLoadComplete="handleLoadComplete"
      @imageLoadError="handleLoadError"
    />
  </div>
</template>

<script setup lang="ts">
import lockImg from "@imgs/lock/lock_screen_1.webp";
const imageUrl = ref(lockImg);

const handleError = (error: any) => {
  console.error("裁剪错误:", error);
};

const handleLoadComplete = (result: any) => {
  console.log("图片加载完成:", result);
};

const handleLoadError = (error: any) => {
  console.error("图片加载失败:", error);
};
</script>
